<template>
	<article class="media">
		<div class="media-content">
			<div class="level is-mobile">
				<div>
					<span class="from">热门内容，来自：{{ indexitem.from }}</span>
				</div>
			</div>

			<div class="level is-mobile">
				<div class="author">
					<img class="image is-24x24" :src="indexitem.avatarUrl" />
					<span>{{indexitem.author}}</span>
				</div>
			</div>

			<div class="level is-mobile">
				<div class="title">
					<span>{{indexitem.title}}</span>
				</div>
			</div>

			<div v-if="indexitem.isContainPictures" class="level is-mobile">
				<div>
					<img class="image is-335x188" :src="indexitem.picturesUrl" />
				</div>
			</div>

			<div class="level is-mobile">
				<div class="summary">
					<span>{{ formatSummary }}</span>
				</div>
			</div>

			<div class="level is-mobile">
				<div class="like">
					<button class="button">
						<span class="icon">
							<i class="fas fa-thumbs-up"></i>
						</span>
						<span class="like">赞同：{{indexitem.like}}</span>
					</button>

					<button class="button">
						<span class="icon">
							<i class="fas fa-thumbs-down"></i>
						</span>
					</button>
				</div>

				<div class="more">
					<span class="icon">
						<i class="fas fa-comment" />
					</span>
					<span>评论：{{indexitem.comment}}</span>
					<span class="icon">
						<i class="fas fa-star" />
					</span>
				</div>
			</div>

		</div>

	</article>
</template>

<script>
export default {
  name: "IndexListItem",
  props: ["indexitem"],
  computed: {
    formatSummary: function() {
      if (this.indexitem.summary.length > 60) {
        return this.indexitem.summary.substring(0, 60) + "...";
      } else {
        return this.indexitem.summary;
      }
    }
  }
};
</script>

<style scoped>
.level {
  margin: 17px;
  font-size: 15px;
}
.from {
  font-size: 17px;
  color: grey;
}
.author {
  font-size: 16px;
}
.title {
  font-size: 20px;
}
.summary {
  font-size: 17px;
}
.like .button {
  color: #0084ff;
  background-color: rgb(229, 242, 255);
}

.like .button .like {
  font-size: 12px;
}

.more {
  color: grey;
}
</style>


